
/**
* Table of Contents:
*
* 01.0 - Global
* 02.0 - Header
* 03.0 - Drawer with menu
* 04.0 - Parallax styles
* 05.0 - Recent works
* 06.0 - Services
* 07.0 - Blog
* 08.0 - Testimonials
* 09.0 - Contact
* 10.0 - Footer
* 11.0 - Responsive styles
* -----------------------------------------------------------------------------
*/


/* ///////////////////////////////////////////////////////////////////// 
//  01 - Global 
/////////////////////////////////////////////////////////////////////*/

* {outline: none !important;}

::selection {
	background-color: #475B6F;
	color: #fff;
}

html {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	overflow-y: scroll;
}

body {
	color: #6a6a6a;	
	background: #f1f0f0;
}

p {margin: 0 0 20px 0;	}

img {max-width: 100%;}

a {
	text-decoration: none;
	outline: none;
}

a{	
	color: #4da7ca;
	-o-transition: all .4s;
	-ms-transition: all .4s;
	-moz-transition: all .4s;
	-webkit-transition: all .4s;
	transition: all .4s;
}

a:hover {
	color: #4290ae;	
}


h1, h2, h3, h4, h5, h6{		
	margin: 0 0 15px 0;	
	color: #3A4F52;
	font-family: 'Alegreya Sans';
}

.btn{border-radius: 0;}
.btn-o {
    border: 1px solid #3A4F52;
    color: #3A4F52;
}
.btn-o:hover {
    background: #3A4F52;
    color: white;
}
.btn.btn-o-white {
    border: 1px solid white;
    color: white;
    background: transparent;
}
.btn.btn-o-white:hover {
    background: white;
    color: #6a6a6a;
}
.copyrights{
	text-indent:-9999px;
	height:0;
	line-height:0;
	font-size:0;
	overflow:hidden;
}

/*////////////////////////////////////////////////////////////////////////
//  02 - Header
///////////////////////////////////////////////////////////////////////*/

#header {	
	position: relative;
	padding: 0 !important;
}

#header.header-wrapper {
	background: no-repeat center center;
	background-size: cover;
	display: table;
	height: 100vh;
	width: 100%;
	position: relative;
	z-index: 1;
	overflow-x: hidden; 
}

@media screen and (max-width: 767px) and (orientation: landscape) {
    #header.header-wrapper {
		height: auto;
		min-height: 100vh;
		padding: 0px; 
	} 
}

#header.header-wrapper .header-wrapper-inner {
    display: table-cell;
    text-align: center;
    vertical-align: middle; 
}

#header .top {
	position:fixed;
	top:0;
	width: 100%;
	padding: 30px;
	height: auto;
	z-index: 500;
	-o-transition: all .5s;
	-ms-transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;	
	transition: all .5s;		
}

#header .top.solid {
    background: #475B6F;
    padding-top: 15px;
    padding-bottom: 15px;
}

#header .top h1{
	margin-bottom: 0;
}
#header .top.solid .toggleDrawer i {
    padding-top: 8px;
}

#header .logo, #header .toggleDrawer{
	font-family: 'Alegreya SC';
	color: white;
}

#header .slogan{
	font-size: 4em;
	margin-bottom: 15px;
	line-height: 1em;
	font-family: 'Nixie One';
	color: white;
}

#header .secondary-slogan{
	font-size: 1.6em;
	color: rgba(255,255,255,.5);
	line-height: 1em;
	font-family: 'Alegreya SC';
}

#header .bottom {
    bottom: 10%;
	display: block;
	position: absolute;
	width: 100%;
	z-index: 3;
}
#header .bottom a img {
    width: 50px;
}
#header .bottom a {
    opacity: 0.7;
}
#header .bottom a:hover {
    opacity: 1;
}


/*////////////////////////////////////////////////////////////////////////
//  03 - Drawer with menu
///////////////////////////////////////////////////////////////////////*/

#drawer-right {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    margin-right: -300px;
    background: #2B3E51;
    width: 300px;
    padding: 20px;
    z-index: 999;
	overflow-y:scroll;
  
	overflow-x:hidden;
}

#drawer-right h1, #drawer-right h2{color: white;}

#drawer-right .nav-pills>li>a {
	font-size: 18px;
	border-radius: 0;
}

#drawer-right .social{margin-top: 30px}
#drawer-right .social ul {
    list-style: none;
    padding-left: 20px;
}
#drawer-right .social ul > li {
    display: inline-block;
}
#drawer-right .social ul > li > a:hover{
	color: white;
}



/*////////////////////////////////////////////////////////////////////////
//  04 - Parallax styles
///////////////////////////////////////////////////////////////////////*/

.content-block{
	background:transparent no-repeat center center fixed;
	-webkit-background-size:100%;
	-moz-background-size:100%;
	-o-background-size:100%;
	background-size:100%;
	background-size:cover;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	overflow:hidden;
	padding: 60px 0;
}
.parallax{
	padding: 80px 0;
}

.block-body {
	margin-top: 60px;
}
#services {
	background-image: url(../images/mid2.jpg);
	color: white;
}
#parallax {
	background-image: url(../images/mid1.jpg);
}
#blog {
	background-image: url(../images/mid3.jpg);
	color: white;
}
#blog h1,h2{
	color: white;
}

#contact {
	background-image: url(../images/mid4.png);
	color: white;
	background-color: #405162;
}
#parallax h1{
}




/*////////////////////////////////////////////////////////////////////////
//  05 - Recent works
///////////////////////////////////////////////////////////////////////*/

.recent-work {
    width: 100%;
    padding-bottom: 27%;
    background: #C3C9CC;
    display: table;
    text-align: center;
    vertical-align: middle;
    padding-top: 27%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    margin-bottom: 30px;
}

.recent-work span{
	margin-top: -18px;
	opacity: 0;
	position: relative;
	z-index: 1;
}
.recent-work:before {
    background: rgba(2, 56, 58, 0.7);
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    opacity: 0;
    -o-transition: all .2s;
	-ms-transition: all .2s;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	transition: all .2s;
}
.recent-work:hover {
    background-size: 200%;
    background-position: center;
}
.recent-work:hover:before, .recent-work:hover span {
    opacity: 1;
}





/*////////////////////////////////////////////////////////////////////////
//  06 - Services
///////////////////////////////////////////////////////////////////////*/

#services h1, #services h2{
	color: white;
}
.service i {
    font-size: 60px;
}
.service {
    padding: 0 25px;
}




/*////////////////////////////////////////////////////////////////////////
//  07 - Blog
///////////////////////////////////////////////////////////////////////*/


#blog .blog-post img {
    margin-bottom: 20px;
}
#blog .date {
    margin-bottom: 15px;
    font-style: italic;
}


/*////////////////////////////////////////////////////////////////////////
//  08 - Testimonials
///////////////////////////////////////////////////////////////////////*/


#testimonials{
	text-align: center;
}
#testimonials .testimonial > img {
    border-radius: 100%;
    margin-bottom: 15px;
}
#testimonials .testimonial {
	padding: 25px;
}


/*////////////////////////////////////////////////////////////////////////
//  09 - Contact
///////////////////////////////////////////////////////////////////////*/


#contact{
	color: white;
}
#contact h1{color: white}

.form-control-white {
    background: transparent;
    color: white;
}

.form-control-white::-webkit-input-placeholder { /* WebKit browsers */
    color:    white;
}
.form-control-white:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    white;
    opacity:  1;
}
.form-control-white::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    white;
    opacity:  1;
}
.form-control-white:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    white;
}


/*////////////////////////////////////////////////////////////////////////
//  10 - Footer
///////////////////////////////////////////////////////////////////////*/


#footer{ background: #2B3E51; color: white;}



/*////////////////////////////////////////////////////////////////////////
//  11 - Responsive styles
///////////////////////////////////////////////////////////////////////*/


@media (max-width: 767px){
	#header .slogan {
		font-size: 2.8em; 
	} 

	#header .secondary-slogan {
		font-size: 1.2em;
	}

	#header .bottom {
		bottom: 13%;
	}

	.blog-post {
		margin-bottom: 40px;
	}

	.recent-work {
		background-position: center;
	}

	.recent-work:before {
		opacity: 1;
	}

	.recent-work span {
		opacity: 1;
	}
}

@media (max-width: 480px) {
	#drawer-right {
		padding: 10px 20px;
	}

	#drawer-right .nav-pills>li>a {
		font-size: 17px;
	}

	.nav-stacked>li+li {
		margin-top: 0;
	}

	.nav>li>a {
		padding: 8px 15px;
	}

	#drawer-right .social {
		margin-top: 5px;
	}

	#header {
		background-size: cover;
	}
}
/*//////////////////////////////// myheader
/* myheader */

	#myheader {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		background-image: -moz-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		background-image: -ms-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		background-image: radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
		max-width: 100%;
		text-align: center;
	}

		#myheader > * {
			-moz-transition: opacity 0.325s ease-in-out;
			-webkit-transition: opacity 0.325s ease-in-out;
			-ms-transition: opacity 0.325s ease-in-out;
			transition: opacity 0.325s ease-in-out;
			position: relative;
			margin-top: 3.5rem;
		}

			#myheader > *:before {
				content: '';
				display: block;
				position: absolute;
				top: calc(-3.5rem - 1px);
				left: calc(50% - 1px);
				width: 1px;
				height: calc(3.5rem + 1px);
				background: #ffffff;
			}

		#myheader > :first-child {
			margin-top: 0;
		}

			#myheader > :first-child:before {
				display: none;
			}

		#myheader .logo {
			width: 5.5rem;
			height: 5.5rem;
			line-height: 5.5rem;
			border: solid 1px #ffffff;
			border-radius: 100%;
		}

			#myheader .logo .icon:before {
				font-size: 2rem;
			}

		#myheader .content {
			border-style: solid;
			border-color: #ffffff;
			border-top-width: 1px;
			border-bottom-width: 1px;
			max-width: 100%;
		}

			#myheader .content .inner {
				-moz-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
				-webkit-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
				-ms-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
				transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
				-moz-transition-delay: 0.25s;
				-webkit-transition-delay: 0.25s;
				-ms-transition-delay: 0.25s;
				transition-delay: 0.25s;
				padding: 3rem 2rem;
				max-height: 40rem;
				overflow: hidden;
			}

				#myheader .content .inner > :last-child {
					margin-bottom: 0;
				}

			#myheader .content p {
				letter-spacing: 0.2rem;
				font-size: 0.8rem;
				line-height: 2;
			}

		#myheader nav ul {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			margin-bottom: 0;
			list-style: none;
			padding-left: 0;
			border: solid 1px #ffffff;
			border-radius: 4px;
		}

			#myheader nav ul li {
				padding-left: 0;
				border-left: solid 1px #ffffff;
			}

				#myheader nav ul li:first-child {
					border-left: 0;
				}

				#myheader nav ul li a {
					display: block;
					min-width: 7.5rem;
					height: 2.75rem;
					line-height: 2.75rem;
					padding: 0 1.25rem 0 1.45rem;
					text-transform: uppercase;
					letter-spacing: 0.2rem;
					font-size: 0.8rem;
					border-bottom: 0;
				}

					#myheader nav ul li a:hover {
						background-color: rgba(255, 255, 255, 0.55);
					}

					#myheader nav ul li a:active {
						background-color: rgba(255, 255, 255, 0.175);
					}

		#myheader nav.use-middle:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: calc(50% - 1px);
			width: 1px;
			height: 100%;
			background: #ffffff;
		}

		#myheader nav.use-middle ul li.is-middle {
			border-left: 0;
		}

		body.is-article-visible #myheader {
			-moz-transform: scale(0.95);
			-webkit-transform: scale(0.95);
			-ms-transform: scale(0.95);
			transform: scale(0.95);
			-moz-filter: blur(0.1rem);
			-webkit-filter: blur(0.1rem);
			-ms-filter: blur(0.1rem);
			filter: blur(0.1rem);
			opacity: 0;
		}

		body.is-preload #myheader {
			-moz-filter: blur(0.125rem);
			-webkit-filter: blur(0.125rem);
			-ms-filter: blur(0.125rem);
			filter: blur(0.125rem);
		}

			body.is-preload #myheader > * {
				opacity: 0;
			}

			body.is-preload #myheader .content .inner {
				max-height: 0;
				padding-top: 0;
				padding-bottom: 0;
				opacity: 0;
			}

		@media screen and (max-width: 980px) {

			#myheader .content p br {
				display: none;
			}

		}

		@media screen and (max-width: 736px) {

			#myheader > * {
				margin-top: 2rem;
			}

				#myheader > *:before {
					top: calc(-2rem - 1px);
					height: calc(2rem + 1px);
				}

			#myheader .logo {
				width: 4.75rem;
				height: 4.75rem;
				line-height: 4.75rem;
			}

				#myheader .logo .icon:before {
					font-size: 1.75rem;
				}

			#myheader .content .inner {
				padding: 2.5rem 1rem;
			}

			#myheader .content p {
				line-height: 1.875;
			}

		}

		@media screen and (max-width: 480px) {

			#myheader {
				padding: 1.5rem 0;
			}

				#myheader .content .inner {
					padding: 2.5rem 0;
				}

				#myheader nav ul {
					-moz-flex-direction: column;
					-webkit-flex-direction: column;
					-ms-flex-direction: column;
					flex-direction: column;
					min-width: 10rem;
					max-width: 100%;
				}

					#myheader nav ul li {
						border-left: 0;
						border-top: solid 1px #ffffff;
					}

						#myheader nav ul li:first-child {
							border-top: 0;
						}

						#myheader nav ul li a {
							height: 3rem;
							line-height: 3rem;
							min-width: 0;
							width: 100%;
						}

				#myheader nav.use-middle:after {
					display: none;
				}

		}
		
		.timeline2-centered {
			position: relative;
			margin-bottom: 30px;
		}
		
		.timeline2-centered:before,
		.timeline2-centered:after {
			content: " ";
			display: table;
		}
		
		.timeline2-centered:after {
			clear: both;
		}
		
		.timeline2-centered:before,
		.timeline2-centered:after {
			content: " ";
			display: table;
		}
		
		.timeline2-centered:after {
			clear: both;
		}
		
		.timeline2-centered:before {
			content: '';
			position: absolute;
			display: block;
			width: 10px;
			background: #f5f5f6;
			top: 20px;
			bottom: 20px;
			margin-left: 26px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		
		.timeline2-centered .timeline2-entry {
			position: relative;
			margin-top: 5px;
			margin-left: 30px;
			margin-bottom: 10px;
			clear: both;
		}
		
		.timeline2-centered .timeline2-entry:before,
		.timeline2-centered .timeline2-entry:after {
			content: " ";
			display: table;
		}
		
		.timeline2-centered .timeline2-entry:after {
			clear: both;
		}
		
		.timeline2-centered .timeline2-entry:before,
		.timeline2-centered .timeline2-entry:after {
			content: " ";
			display: table;
		}
		
		.timeline2-centered .timeline2-entry:after {
			clear: both;
		}
		
		.timeline2-centered .timeline2-entry.begin {
			margin-bottom: 0;
		}
		
		.timeline2-centered .timeline2-entry.left-aligned {
			float: left;
		}
		
		.timeline2-centered .timeline2-entry.left-aligned .timeline2-entry-inner {
			margin-left: 0;
			margin-right: -18px;
		}
		
		.timeline2-centered .timeline2-entry.left-aligned .timeline2-entry-inner .timeline2-time {
			left: auto;
			right: -100px;
			text-align: left;
		}
		
		.timeline2-centered .timeline2-entry.left-aligned .timeline2-entry-inner .timeline2-icon {
			float: right;
		}
		
		.timeline2-centered .timeline2-entry.left-aligned .timeline2-entry-inner .timeline2-label {
			margin-left: 0;
			margin-right: 70px;
		}
		
		.timeline2-centered .timeline2-entry.left-aligned .timeline2-entry-inner .timeline2-label:after {
			left: auto;
			right: 0;
			margin-left: 0;
			margin-right: -9px;
			-moz-transform: rotate(180deg);
			-o-transform: rotate(180deg);
			-webkit-transform: rotate(180deg);
			-ms-transform: rotate(180deg);
			transform: rotate(180deg);
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner {
			position: relative;
			margin-left: -20px;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner:before,
		.timeline2-centered .timeline2-entry .timeline2-entry-inner:after {
			content: " ";
			display: table;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner:after {
			clear: both;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner:before,
		.timeline2-centered .timeline2-entry .timeline2-entry-inner:after {
			content: " ";
			display: table;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner:after {
			clear: both;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-time {
			position: absolute;
			left: -100px;
			text-align: right;
			padding: 10px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-time>span {
			display: block;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-time>span:first-child {
			font-size: 15px;
			font-weight: bold;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-time>span:last-child {
			font-size: 12px;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon {
			background: #fff;
			color: #737881;
			display: block;
			width: 70px;
			height: 70px;
			-moz-background-clip: padding;
			-o-background-clip: padding-box;
			background-clip: padding-box;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			text-align: center;
			line-height: 70px;
			font-size: 21px;
			float: left;
			border: 5px solid #eaeaea;
			margin-left: -15px;
			margin-top: 40px;
			line-height: 60px;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon.bg-primary {
			background-color: #4d9cf8;
			color: #fff;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon.bg-secondary {
			background-color: #9e9e9e;
			color: #fff;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon.bg-success {
			background-color: #4CAF50;
			color: #fff;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon.bg-info {
			background-color: #03A9F4;
			color: #fff;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon.bg-warning {
			background-color: #FFC107;
			color: #fff;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon.bg-danger {
			background-color: #f44336;
			color: #fff;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label {
			position: relative;
			background: #f5f5f5;
			padding: 15px;
			margin-left: 70px;
			-webkit-border-radius: 0px;
			-moz-border-radius: 0px;
			border-radius: 0px;
			margin-top: 45px;
			border: 0px solid #eaeaea;
			-webkit-border-radius: 0px;
			-moz-border-radius: 0px;
			border-radius: 0px;
			padding: 20px;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label:after {
			content: '';
			display: block;
			position: absolute;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 9px 9px 9px 0;
			border-color: transparent #f5f5f5 transparent transparent;
			left: 0;
			top: 10px;
			margin-left: -9px;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label h2,
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label p {
			margin: 0;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label p+p {
			margin-top: 15px;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label h2 {
			font-size: 16px;
			margin-bottom: 10px;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label h2 a {
			color: #4d9cf8;
		}
		
		.timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label h2 span {
			-webkit-opacity: .6;
			-moz-opacity: .6;
			opacity: .6;
			-ms-filter: alpha(opacity=60);
			filter: alpha(opacity=60);
		}
		
		.timeline2-icon i {
			font-size: 28px;
		}
		